<template>
  <div class="add-todo">
    <input 
      type="text" 
      v-model="newTodoText" 
      placeholder="输入新任务..."
      @keyup.enter="handleAddTodo"
    >
    <button @click="handleAddTodo">添加</button>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

// 定义输入框的响应式数据
const newTodoText = ref('');

// 定义要向父组件发送的事件
const emit = defineEmits(['add-todo']);

// 处理添加任务的函数
const handleAddTodo = () => {
  // 去除首尾空格后如果还有内容
  if (newTodoText.value.trim()) {
    // 向父组件发送事件和数据
    emit('add-todo', newTodoText.value.trim());
    // 清空输入框
    newTodoText.value = '';
  }
};
</script>

<style scoped>
.add-todo {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 8px;
  font-size: 16px;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
    